<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>万科金色城市K3地块历史成交价格</title>
</head>
<body>
<div id="app">
    <h5 style="text-align: center;">万科金色城市K3地块历史成交价格</h5>
    <button @click="changeType">切换图表类型</button>
    <button @click="toData">跳到数据页</button>
    <ve-line v-if="showType === 1" :data="chartData"></ve-line>
    <ve-histogram :data="chartData"></ve-histogram>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                showType: 1,
                chartData: {
                    columns: ['成交时间', '挂牌价格', '成交价格'],
                    rows: [
                        // {'成交时间': '1月1日', '成交价格': 123},
                        // {'成交时间': '1月2日', '成交价格': 1223},
                        // {'成交时间': '1月3日', '成交价格': 2123},
                        // {'成交时间': '1月4日', '成交价格': 4123},
                        // {'成交时间': '1月5日', '成交价格': 3123},
                        // {'成交时间': '1月6日', '成交价格': 7123}
                    ]
                }
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData() {
                axios.get('/api/house').then(response => {
                    console.log(response.data);
                    response.data.forEach(item => {
                        console.log(item);
                        this.chartData.rows.push({
                            '成交时间': item.dealTime,
                            '挂牌价格': item.listingPrice,
                            '成交价格': item.totalPrice
                        });
                    });
                    console.log(this.chartData.rows);
                })
            },
            changeType() {
                if (this.showType === 1) {
                    console.log('line => histogram');
                    this.showType = 2
                }
                if (this.showType === 2) {
                    console.log('histogram => line');
                    this.showType = 1
                }
            },
            toData() {
                window.location.href = 'spider.html';
            }
        }
    })
</script>
</body>
</html>